<template>
  <div class="tpl-content-wrapper">
    <ol class="am-breadcrumb">
      <li><a href="#" class="am-icon-home">首页</a></li>
      <li><a href="#">平台用户</a></li>
      <li class="am-active">公众号配置</li>
    </ol>
        <div class="tpl-portlet-components">
            <div class="am-g">
                <div class="am-u-sm-12">
                        <table class="am-table am-table-striped am-table-hover table-main">
                            <thead>
                                <tr>
                                    <th class="table-id">序号</th>
                                    <th>名称</th>
                                    <th class="am-hide-sm-only">参数</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>公众号appId</td>
                                    <td class="am-hide-sm-only">{{params.appId}}</td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>公众号appSecret</td>
                                    <td class="am-hide-sm-only">{{params.appSecret}}</td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td>商户号id</td>
                                    <td class="am-hide-sm-only">{{params.mchId}}</td>
                                </tr>
                                <tr>
                                    <td>4</td>
                                    <td>商户号secret</td>
                                    <td class="am-hide-sm-only">{{params.wxpaykey}}</td>   
                                </tr>
                                <tr>
                                    <td>5</td>
                                    <td class="am-hide-sm-only">全局分享标题</td>
                                    <td>{{params.title}}</td>                                   
                                </tr>
                                <tr>
                                    <td>6</td>
                                    <td class="am-hide-sm-only">全局分享内容</td>
                                    <td>{{params.desc}}</td>                                    
                                </tr>
                                <tr>
                                    <td>7</td>
                                    <td class="am-hide-sm-only">全局分享图片</td>
                                    <td colspan=2><up-file :imgPath="params.imgUrl" text="点击增加、替换公众号图标" @upFileSuccess="upFileSuccess"></up-file></td>
                                </tr>
                                <tr>
                                    <td>8</td>
                                    <td class="am-hide-sm-only">主页</td>
                                    <td colspan=2><a target= _blank :href="host + '/wx/project/mainpage'">{{host}}/wx/project/mainpage</a></td>
                                </tr>
                                <tr>
                                    <td>9</td>
                                    <td class="am-hide-sm-only">用户中心</td>
                                    <td colspan=2><a target= _blank :href="host + '/wx/usercenter/open'">{{host}}/wx/usercenter/open</a></td>
                                </tr>
                                <tr>
                                    <td>10</td>
                                    <td class="am-hide-sm-only">发起救助</td>
                                    <td colspan=2><a target= _blank :href="host + '/wx/help/page'">{{host}}/wx/help/page</a></td>
                                </tr>
                                <tr>
                                    <td>11</td>
                                    <td class="am-hide-sm-only">安全证书</td>
                                    <td colspan=2>
                                        <up-file2 :certName="params.certName"></up-file2>
                                    </td>
                                </tr>
                                <tr>
                                    <td>12</td>
                                    <td>小程序appId</td>
                                    <td class="am-hide-sm-only">{{params.smallappId}}</td>
                                </tr>
                                <tr>
                                    <td>13</td>
                                    <td>小程序appSecret</td>
                                    <td class="am-hide-sm-only">{{params.smallappSecret}}</td>                                   
                                </tr>
                                <tr>
                                    <td>14</td>
                                    <td>商户号id</td>
                                    <td class="am-hide-sm-only">{{params.smallappMchId}}</td>
                                </tr>
                                <tr>
                                    <td>15</td>
                                    <td>接口ApiSecret</td>
                                    <td class="am-hide-sm-only">{{params.smallappApiSecret}}</td>
                                </tr>
                            </tbody>
                        </table>
                        <hr>
                </div>
            </div>
        </div>
        <div class="am-modal am-modal-prompt" tabindex="-1" id="my-prompt">
            <div class="am-modal-dialog">
                <div class="am-modal-hd">{{title}}</div>
                <div class="am-modal-bd">
                    {{content}}<br>
                    <input type="text" class="am-modal-prompt-input" placeholder='此为重要数据，请谨慎修改！' v-model="newContent">
                </div>
                <div class="am-modal-footer">
                    <span class="am-modal-btn" data-am-modal-cancel>取消</span>
                    <span class="am-modal-btn" data-am-modal-confirm>提交</span>
                </div>
            </div>
        </div>
  </div>
</template>

<script>
    import * as apis from '../../../apis'
    export default {
        data() {
            return {
                eid: this.$route.params.eid || '',
                params: {},
                title: '',
                content: '',
                newContent: '',
                host: ''
            }
        },
        created () {
        },
        mounted() {
            this.getLists()
        },
        computed: {
        },
        methods: {
            getLists() {
                apis.gzhInfo(this.eid).then(({data: data}) => {
                    if (data && data.result_code === 1) {
                        this.params = data.result.wxParams
                        this.host = process.env.WX_HOST.replace('{{eid}}', data.result.wxParams.eid)
                        console.log('certName', this.params.certName)
                    }
                })
            },
            update (title, content, field) {
                let that = this
                this.title = title
                this.content = content
                this.field = field
                this.newContent = content
                $('#my-prompt').modal({
                    onConfirm: function(e) {
                        that.updateCall()
                    },
                    onCancel: function(e) {
                        this.newContent = ''
                    }
                })
            },
            updateCall () {
                apis.gzhUpdate(this.params._id, this.newContent, this.field).then(({data: data}) => {
                    if (data && data.result_code === 1) {
                        this.getLists()
                    }
                })
            },
            upFileSuccess (imgPath) {
                this.params.imgUrl = imgPath
                this.newContent = imgPath
                this.field = 'imgUrl'
                this.updateCall()
            }
        }
    }
</script>
